<template>
	<div class="myorderText-innerhtml">
		<div class="everyordertitle">
			<span>订单号：{{data.userorderid}}</span>
			<span>下单日期：{{data.userordertime}}</span>
			<span>{{data.ueserordershopname}}</span>
			<span>订单状态：<strong>{{orderstate}}</strong></span>
		</div>
		<div class="everyorderinnerhtml">
			<div class="everyorderinnerhtml1">
				<div class="orderDetail">
					<span><img :src="data.foodimg" alt=""></span>
					<span>{{data.foodname}}</span>
					<span>{{data.foodtype}}</span>
					<span>￥{{data.foodmoney}}x{{data.foodtnum}}</span>
				</div>
			</div>
			<div class="everyorderinnerhtml2">
				<div>店铺合计:￥{{data.foodallmoney}}</div>
				<div>含运费:￥{{data.yunfei}}</div>
			</div>
			<div class="everyorderinnerhtml3">
				<router-link to="/myself/myorder/orderdetail" class="lookdetail">查看详情</router-link>
				<div v-show="isshow==2">
					<router-link to="">去支付</router-link>
				</div>
				<div v-show="isshow==1">
					<router-link to="">删除订单</router-link>
				</div>
				<div v-show="isshow==2">
					<router-link to="">取消订单</router-link>
				</div>
				<div v-show="isshow==(3||5)">
					<router-link to="">申请退款</router-link>
				</div>
				<div v-show="isshow==4">
					<router-link to="">确认收货</router-link>
				</div>
				<div v-show="isshow==4">
					<router-link to="">查看物流</router-link>
				</div>
				<div v-show="isshow==5">
					<router-link to="/myself/myorder/orderevaluate">去评价</router-link>
				</div>
				<div v-show="isshow==5">
					<router-link to="">交易完成</router-link>
				</div>
				<div v-show="isshow==8">
					<router-link to="">申请平台接入</router-link>
				</div>
				<!-- <div v-show="isshow==2"><router-link to="">取消订单</router-link></div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				isshow: null,
				orderstate: '',
				
			}
		},
		beforeMount() {
			this.isshow = this.data.userorderstate;
			// window.console.log(this.isshow)
			if (this.data.userorderstate == 1) {
				this.orderstate = '待付款'
			} else if (this.data.userorderstate == 2) {
				this.orderstate = '待发货'
			} else if (this.data.userorderstate == 3) {
				this.orderstate = '已发货'
			} else if (this.data.userorderstate == 4) {
				this.orderstate = '已收货'
			} else if (this.data.userorderstate == 5) {
				this.orderstate = '申请退款中'
			} else if (this.data.userorderstate == 6) {
				this.orderstate = '退款中'
			} else if (this.data.userorderstate == 7) {
				this.orderstate = '退款失败'
			} else if (this.data.userorderstate == 8) {
				this.orderstate = '已完成'
			}

		},
		methods: {
			
		},

	}
</script>

<style>
	.myorderText-innerhtml {
		width: 90%;
		height: 286px;
		margin-left: 5%;
		border: 1px solid #c1c1c1;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.everyordertitle {
		width: 100%;
		height: 46px;
		line-height: 46px;
		font-size: 14px;
		background: #c1c1c1;
	}

	.everyordertitle span:nth-of-type(1) {
		margin-left: 2%;
	}

	.everyordertitle span:nth-of-type(2) {
		margin-left: 3%;
	}

	.everyordertitle span:nth-of-type(3) {
		margin-left: 3%;
		color: #4b943d;
	}

	.everyordertitle span:nth-of-type(4) {
		float: right;
		margin-right: 2%;
	}

	.everyordertitle strong {
		font-weight: normal;
		color: #f08200;
	}

	.everyorderinnerhtml {
		width: 100%;
		height: 240px;
	}

	.everyorderinnerhtml1 {
		width: 66.8%;
		height: 100%;
		border-right: 1px solid #c1c1c1;
		float: left;
	}

	.everyorderinnerhtml2 {
		width: 20%;
		height: 100%;
		border-right: 1px solid #C1C1C1;
		float: left;
		text-align: center;
	}

	.everyorderinnerhtml2 div:nth-of-type(1) {
		margin-top: 100px;
	}

	.everyorderinnerhtml3 {
		width: 12.82%;
		height: 170px;
		padding-top: 70px;
		float: left;
		text-align: center;
	}

	.everyorderinnerhtml3 .lookdetail {
		color: #2E9E3B;
		text-decoration: underline;
	}

	.everyorderinnerhtml3 div {
		width: 80%;
		height: 30px;
		line-height: 30px;
		margin-left: 10%;
		background: #f08200;
		margin-top: 10px;
		border-radius: 5px;
		font-size: 12px;
	}

	.everyorderinnerhtml3 div a {
		color: white;
	}

	.orderDetail {
		width: 100%;
		height: 118px;
		line-height: 118px;
		margin-top: 60px;
	}

	.orderDetail span {
		float: left;
	}

	.orderDetail span:nth-of-type(1) {
		width: 78px;
		height: 78px;
		border: 1px solid #c1c1c1;
		margin-top: 20px;
		margin-left: 3%;
		background: url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}

	.orderDetail img {
		width: 100%;
		height: 100%;
	}

	.orderDetail span:nth-of-type(2) {
		margin-left: 3%;
		margin-right: 10%;
	}

	.orderDetail span:nth-of-type(4) {
		margin-left: 10%;
	}

	.orderDetail2 {
		border: none;
	}
</style>
